<template>
  <span>
    <section v-if="keyName==='invoiceFlag'">
      {{record[keyName] ? '已开票' : '未开票'}}
      <!-- <span v-if="record[keyName]"
            class="iconSty"
            @click="openAction">
        票
      </span> -->
      <icon-svg v-if="record[keyName]"
                class="iconClass"
                icon-name="piao1"
                @click="openAction"></icon-svg>
    </section>
    <section v-else-if="keyName === 'invoicingDate'">
      {{record.invoice &&  record.invoice[keyName] ? $moment(record.invoice[keyName]).format("YYYY-MM-DD") : '--'}}
    </section>
    <section v-else>{{record.invoice ? record.invoice[keyName] : '--'}}</section>
    <FinanceInvoicingAction ref="action"
                            :is-action="false"
                            :record="record"
                            :is-disabled="disabled"
                            v-bind="$attrs" />
  </span>
</template>

<script>
import FinanceInvoicingAction from "./FinanceInvoicingAction.vue"
export default {
  name: "FinanceInvoicingColumn",
  components: {
    FinanceInvoicingAction
  },
  props: {
    record: {
      type: Object,
      default: () => { }
    },
    isDisabled: String,
    keyName: String
  },
  data () {
    return {};
  },
  computed: {
    disabled () {
      if (this.isDisabled === '1' && this.record?.carrierType === 0) {
        return '0'
      }
      return this.isDisabled
    }
  },
  methods: {
    openAction () {
      this.$refs.action.visible = true;
    }
  }
};
</script>
<style scoped>
.iconClass {
  width: 17px;
  height: 17px;
}
</style>
